<template>
	<div class="el-select custom-select-input">
		<div class="fan-select-input" @click="open">
			<div class="loading" v-if="loading"><i class="el-icon-loading"></i>{{ loading }}</div>
			<div class="tag-list">
				<div class="tag-item" v-for="(item,index) in renderList" :key="index">
					{{ item.F_FullName || item.F_RealName}}
				</div>
			</div>
			<div class="more-count" v-if="limit && (limitCount-limit>0)">+{{ limitCount-limit }}</div>
			<div class="input__suffix">
				<i class="el-icon-arrow-down"></i>
			</div>
		</div>
		<el-dialog
			append-to-body
			destroy-on-close
			:title="label"
			:visible.sync="dialogVisible"
			width="800px"
			:before-close="handleClose"
			@closed="closed"
		>
			<div>
				<SelectTab @selectData="selectData" :echoData="value" v-if="show"></SelectTab>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import SelectTab from "./components/selectTab.vue";
import { getData,store,loadIns } from "./storeData.js"
export default {
    name: "SelectAuth",
    components: {
        SelectTab
    },
    props: {
        limit: {
            type: Number,
        },
        value: {
            typeof: Array,
            default:[],
        },
        label: {
            type: String,
            default:"选择范围"
        }
    },
    computed: {
        limitCount() {
            let count = 0;
            this.value.forEach(item => {
                count += item.data.length;
            })
            return count
        }
    },
    data() {
        return {
            dialogVisible: false,
            renderList: [],
            selectValue: [],
            store,
            isLoaded: false,
            show: false,
            loading:false,
        }
    },
    methods: {
        open() {
            this.dialogVisible = true;
            this.show = true;
            getData(() => {},true);
        },
        confirm() {
            this.dialogVisible = false;
            console.log("select", this.selectValue);
            this.$emit("select", this.selectValue);
            this.$emit("input", this.selectValue);
            this.renderData(this.selectValue);
        },
        cancel() {
            this.dialogVisible = false;

        },
        closed() {
            this.show = false;
            // getData(() => {},true);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(() => {
                done();
            })
            .catch(()=> {});
        },
        renderData(v) {
            const selectArrayData = [];
            try {
                v.forEach(_ => {
                      const key = _.type;
                      switch (key) {
                          case "Users":
                                store.userData.data.forEach((item => {
                                    if (_.data.includes(item.F_UserId)) {
                                        if (this.limit && selectArrayData.length >= this.limit) {
                                            throw new Error();
                                        }
                                        selectArrayData.push(item)
                                    }
                                }))
                                break;
                            case "Roles":
                                store.roleData.data.forEach((item => {
                                    if (_.data.includes(item.F_RoleId)) {
                                        if (this.limit && selectArrayData.length >= this.limit) {
                                            throw new Error();
                                        }
                                        selectArrayData.push(item)
                                    }
                                }));
                                break;
                          case "Deps":
                              store.depData.data.forEach((item => {
                                  if (_.data.includes(item.F_DepartmentId)) {
                                     if (this.limit && selectArrayData.length >= this.limit) {
                                            throw new Error();
                                      }
                                      selectArrayData.push(item)
                                  }
                              }));
                              break;
                            default:
                            break;
                    }
               });
            } catch (error) {
                //*
            }
            this.renderList = Object.freeze(selectArrayData);
            console.log("渲染数据", selectArrayData);

        },
        selectData(v) {
            console.log(v,"selectData--------------");
            //* 处理已选中的数据项
            this.selectValue = v;
        },
        loaded() {
            // this.loading = false;
            this.$set(this, "loading", false);
            console.log("完成加载数据------",this.loading)
            this.renderData(this.value);

        }
    },
    watch: {
        "store": {
            handler: function (v) {
                let isAll = true;
                try {
                    Object.keys(v).forEach(key => {
                        if (v[key].data.length == 0) {
                            throw new Error("length == 0")
                        }
                   })
                } catch (error) {
                    console.log(error);
                    isAll = false;
                }

                if (isAll) {
                    //* 正常回显数据
                    this.isLoaded = true;
                }

            },
            immediate:true,
            deep:true
        },
        "isLoaded": function () {
            // this.renderData(this.value);
        },
        "value": {
            handler: function (v) {
                this.selectValue = v;
                // this.renderData(v);
            },
            immediate:true
        }
    },
    mounted() {
        this.loading = true;
        loadIns.on("loaded",this.loaded);
        getData();


    },
    beforeDestroy() {
        loadIns.off("off",this.loaded);
    }

}
</script>
<style lang="scss" scoped>
.fan-select-input{
    width: 100%;
    min-height: 32px;
    border:solid 1px #eee;
    border-radius: 4px;
    display: flex;
    margin-top: 20px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    .loading{
        position: absolute;
        left:0px;
        z-index: 1;
    }
    .tag-list{
        flex: 1;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        height: 100%;
        padding:0px 4px;
        overflow: hidden;
        overflow-x: hidden;
        box-sizing: border-box;
        top:0px;
        flex-wrap: wrap;
        font-size: 0px;
        margin-right: 10px;
        padding:4px 4px;
        padding-bottom:2px;
        &::before{
            content: "";
            font-size:12px;
            height: 24px;
            display:inline-block;
            background-color: #dae5ff;
            line-height: 24px;
            padding:0px;
            width:0px;
            margin-right: 4px;
            white-space: nowrap;
            position: relative;
            border-radius: 2px;
            margin-bottom: 2px;
            margin-left: -4px;
        }
        .tag-item{
            font-size:12px;
            height: 24px;
            display:inline-block;
            background-color: #dae5ff;
            line-height: 24px;
            padding:0px 4px;
            margin-right: 4px;
            white-space: nowrap;
            position: relative;
            border-radius: 2px;
            margin-bottom: 2px;
        }
    }
    .more-count{
        flex-shrink: 0;
        padding: 0px 4px;
        height: 24px;
        line-height: 24px;
        justify-content: center;
        align-items: center;
        font-size:12px;
        background-color: #dae5ff;
        text-align: center;
        border-radius:2px;
    }
    .input__suffix{
        width:30px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.custom-select-input {
	display: flex;
	.el-input--suffix {
		display: flex;
		.scroll-tags {
			overflow: hidden;
		}
		.count-number {
			position: absolute;
			top: 50%;
			right: 30px;
			padding: 0px 5px;
			margin-top: -11px;
			background: #dae5ff;
			font-size: 12px;
			box-sizing: border-box;
			margin-right: 5px;
			height: 22px;
			line-height: 22px;
			border-radius: 2px;
		}
	}
}
.el-input__inner {
	padding: 2px 5px;
	height: 32px;
	padding-right: 100px;
	box-sizing: border-box;
	white-space: nowrap;
	// overflow: hidden;
	.tag-item {
		display: inline-block;
		padding: 0px 5px;
		background: #dae5ff;
		font-size: 12px;
		box-sizing: border-box;
		margin-right: 5px;
		height: 22px;
		line-height: 22px;
		border-radius: 2px;
	}
}
</style>
